// HMI 表格通用样式
.hmi-table-container {
  padding: 20px;

  &__card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .el-card__body {
      padding: 20px;
    }
  }

  &__table {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;

    // 使用 CSS Grid 实现自适应列宽
    .el-table__header-wrapper,
    .el-table__body-wrapper {
      .el-table__header,
      .el-table__body {
        table-layout: auto;
        
        tr {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 0;
        }
      }
    }

    // 表格列样式优化
    .el-table__cell {
      padding: 12px 8px;
      border-right: 1px solid var(--el-table-border-color);
      
      // 文本溢出处理
      .cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.5;
      }
    }

    // 表头样式
    .el-table__header {
      .el-table__cell {
        background-color: var(--el-table-header-bg-color);
        font-weight: 600;
        color: var(--el-table-header-text-color);
      }
    }

    // 行样式
    .el-table__row {
      &:hover {
        background-color: var(--el-table-row-hover-bg-color);
      }

      &.current-row {
        background-color: var(--el-color-primary-light-9);
      }
    }

    // 空数据状态
    .el-table__empty-block {
      padding: 60px 0;
      
      .el-table__empty-text {
        color: var(--el-text-color-placeholder);
        font-size: 14px;
      }
    }

    // 加载状态
    .el-loading-mask {
      border-radius: 4px;
    }
  }

  // 分页样式
  &__pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    
    .el-pagination {
      --el-pagination-font-size: 14px;
      --el-pagination-bg-color: transparent;
      --el-pagination-text-color: var(--el-text-color-regular);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .hmi-table-container {
    padding: 10px;

    &__card .el-card__body {
      padding: 15px;
    }

    &__table {
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        .el-table__header,
        .el-table__body {
          tr {
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          }
        }
      }

      .el-table__cell {
        padding: 8px 6px;
        font-size: 13px;
      }
    }

    &__pagination {
      margin-top: 15px;
      justify-content: center;
      
      .el-pagination {
        --el-pagination-font-size: 13px;
      }
    }
  }
}

// 深色主题适配
@media (prefers-color-scheme: dark) {
  .hmi-table-container {
    &__card {
      background-color: var(--el-bg-color-page);
      border-color: var(--el-border-color-light);
    }

    &__table {
      .el-table__cell {
        border-color: var(--el-border-color-lighter);
      }
    }
  }
}

// 打印样式
@media print {
  .hmi-table-container {
    padding: 0;

    &__pagination {
      display: none;
    }

    &__table {
      .el-table__cell {
        border: 1px solid #000;
        padding: 8px;
      }
    }
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .hmi-table-container {
    &__table {
      .el-table__cell {
        border-width: 2px;
      }

      .el-table__header .el-table__cell {
        font-weight: 700;
      }
    }
  }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  .hmi-table-container {
    &__table {
      .el-table__row {
        transition: none;
      }
    }
  }
}
